<template>
	<div class="manage_page fillcontain">
		<el-row style="height: 100%;overflow: hidden;">
			<!-- 头部 -->
			<el-col :span="24">
				<div class="header_view">
					<div class="left">
						<img src="https://anhuiyaoying.com/jiecunyun/logo.png" alt="">
						<p>捷存云</p>
					</div>
					<div class="right">
						<div class="item" v-if="isAdmin" @click="showPriceRememberDialog">系统设置</div>
						<div class="item" @click="showKefu=true">在线客服</div>
						<div class="item">
							<el-popover placement="bottom" title="任务列表" width="360" 
								trigger="click" v-model="showPop">
								<div slot="reference" class="task">
									<img src="https://anhuiyaoying.com/webs/task.png" alt="">
									<span>任务</span>
								</div>
								<div class="pop_content">
									<div class="clear_all" v-if="taskList&&taskList.length" @click="removeAll">清空</div>
									<div v-if="taskList&&taskList.length" class="lists">
										<div v-for="item in taskList" :key="'task_'+item.id" class="cell">
											<span>{{ item.file_name }}</span>
											<div class="btns">
												<i class="el-icon-download blue" @click="downloadItem(item)"></i>
												<i class="el-icon-error" @click="removeItem(item)"></i>
											</div>
										</div>
									</div>
									<div v-else class="lists">暂无任务</div>
									<div class="bottom"></div>
								</div>
							</el-popover>
						</div>
						<div class="item" v-hasPermi="['query_todo_list']" @click="toTodoList">
							<el-badge :value="badgeCount" :hidden="!badgeCount" class="badge_item">
								<i class="el-icon-message" style="font-size: 22px;"></i>
							</el-badge>
						</div>
						<div class="item">
							<el-dropdown class="avatar-container right-menu-item hover-effect avatar-wrapper" @command="handleCommand">
								<div class="user_info">
									<el-avatar size="medium" :src="avatar"></el-avatar>
									<div class="names">
										<span>{{ info.name }}</span>
										<span style="margin-top: 3px;">{{ info.phone }}</span>
									</div>
								</div>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item command='personCenter'>个人中心</el-dropdown-item>
									<el-dropdown-item command='logout'>退出登录</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>
					</div>
				</div>
			</el-col>
			<!-- 侧边栏 -->
	  		<el-col :span="3" class="slider_view" style="width: 150px;">
				<el-menu :default-active="defaultActive" text-color="#000" active-text-color="#fff"
					:unique-opened="true" style="min-height: 100%;" @select="menuSelect" router>
					<el-menu-item class="item" v-if="showStatistic" index="manage"><i class="el-icon-s-home"></i>首页</el-menu-item>
					<el-menu-item class="item" v-else index="redirectPage"><i class="el-icon-s-home"></i>首页</el-menu-item>
					<el-submenu index="1">
						<div class="item" slot="title"><i class="el-icon-s-order"></i>销售</div>
						<el-menu-item index="saleOrder" v-hasPermi="['sale_order_list']">销售开单</el-menu-item>
						<el-menu-item index="saleReturn" v-hasPermi="['sale_return_list']">销售退货</el-menu-item>
						<el-menu-item index="saleReserve" v-hasPermi="['query_sale_reserve_list']">销售预定</el-menu-item>
					</el-submenu>
					<el-submenu index="2">
						<div class="item" slot="title">
							<div class="my_icon">
								<img src="https://anhuiyaoying.com/jiecunyun/purchase.png" alt="">
							</div>采购</div>
						<el-menu-item index="purchaseOrder" v-hasPermi="['purchase_list']">采购进货</el-menu-item>
						<el-menu-item index="purchaseReturn" v-hasPermi="['return_list']">采购退货</el-menu-item>
						<el-menu-item index="purchaseReserve" v-hasPermi="['query_purchase_reserve_list']">采购预定</el-menu-item>
					</el-submenu>
					<el-menu-item class="item" index="customerList" v-hasPermi="['customer_list']">
						<i class="el-icon-s-custom"></i>客户</el-menu-item>
					<el-menu-item class="item" index="supplierList" v-hasPermi="['supplier_list']">
						<i class="el-icon-s-shop"></i>供货商</el-menu-item>
					<el-menu-item class="item" index="productList" v-hasPermi="['goods_list']">
						<i class="el-icon-s-goods"></i>商品</el-menu-item>
					<el-submenu index="3">
						<div class="item" slot="title">
							<div class="my_icon">
								<img src="https://anhuiyaoying.com/jiecunyun/money.png" alt="">
							</div>财务</div>
						<el-menu-item index="expensesList" v-hasPermi="['goods_list']">日常收支</el-menu-item>
						<el-menu-item index="flowRecords" v-show="showStatistic">资金账户流水</el-menu-item>
						<el-menu-item index="receiveOrder" v-hasPermi="['customer_receive_list']">收款单</el-menu-item>
						<el-menu-item index="payOrder" v-hasPermi="['supplier_payment_list']">付款单</el-menu-item>
						<el-menu-item index="customerCheck" v-if="showStatistic">客户对账单</el-menu-item>
						<el-menu-item index="supplierCheck" v-if="showStatistic">供货商对账单</el-menu-item>
					</el-submenu>
					<el-submenu index="4">
						<div class="item" slot="title"><i class="el-icon-s-home"></i>库存</div>
						<el-menu-item v-if="showStatistic" index="stock">库存查询</el-menu-item>
						<el-menu-item index="stockTaking" v-hasPermi="['stock_check_orders_list']">盘点</el-menu-item>
						<el-menu-item index="joinSplit" v-hasPermi="['stock_join_orders_list']">组装拆分</el-menu-item>
						<el-menu-item v-if="showStatistic" index="stockwarning">库存预警</el-menu-item>
						<el-menu-item v-if="showStatistic" index="batchQuery">批次查询</el-menu-item>
						<el-menu-item v-if="showStatistic" index="qualityQuery">保质期查询</el-menu-item>
					</el-submenu>
					<el-submenu index="5" v-if="showStatistic">
						<div class="item" slot="title"><i class="el-icon-s-data"></i>报表</div>
						<el-menu-item index="businessCount">经营报表</el-menu-item>
						<el-menu-item index="customerSales">客户销售汇总</el-menu-item>
						<el-menu-item index="supplierBuy">供货商采购汇总</el-menu-item>
						<el-menu-item index="productsAnalysis">商品采销分析</el-menu-item>
						<el-menu-item index="expenditure">日常收支统计</el-menu-item>
						<el-menu-item index="commission">员工提成统计</el-menu-item>
					</el-submenu>
					<el-submenu index="6">
						<div class="item" slot="title"><i class="el-icon-s-tools"></i>系统管理</div>
						<el-menu-item index="roleList" v-hasPermi="['role_list']">角色管理</el-menu-item>
						<el-menu-item index="userList" v-hasPermi="['query_user_list']">用户管理</el-menu-item>
						<el-menu-item v-if="isAdmin" index="setPrint">打印设置</el-menu-item>
						<el-menu-item index="priceLevel" v-hasPermi="['price_level_list']">价格等级</el-menu-item>
						<el-menu-item index="units" v-hasPermi="['goods_add']">单位管理</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-col>
			<el-col :span="21" class="slider_view" style="width: calc(100% - 150px);">
				<!-- <keep-alive> -->
				<div class="tabs_view">
					<el-tabs v-model="editableTabsValue" type="card" 
						@tab-remove="handleTabsEdit" @tab-click="handleTabsClick">
						<el-tab-pane
							:key="item.name"
							v-for="item in editableTabs"
							:label="item.title"
							:name="item.name"
							:closable="item.name!='manage'"
						>
						</el-tab-pane>
					</el-tabs>
				</div>
				<div class="page_view">
					<keep-alive :include="cachedViews">
						<router-view></router-view>
					</keep-alive>
				</div>
				<!-- </keep-alive> -->
			</el-col>
		</el-row>
		<!-- 客服弹窗 -->
		<el-dialog class="kefu" title="专属客服经理" :visible.sync="showKefu" append-to-body>
			<div class="kefu_header">
				<div class="row_box">
					<img src="https://anhuiyaoying.com/jiecunyun/logo.png" alt="">
					<div class="row_center">
						<span>{{ info.name }}，您好！我是您的专属客服经理小财</span>
						<span style="margin-top: 5px;">有问题欢迎随时联系我哦~</span>
					</div>
				</div>
				<div class="row_right">
					<img src="https://anhuiyaoying.com/webs/wx_code.jpg" alt="">
					<span>微信扫码加我(微信号:DAITAO32)</span>
					<span>联系电话：19154081673</span>
				</div>
			</div>
			<div class="kefu_botom">
				<div class="title">公共客服</div>
				<div class="content_box">
					<div class="box">
						<div class="item">
							<img src="https://anhuiyaoying.com/webs/emil.png" alt="">
							<div class="column_box">
								<span class="txt1">公共客服邮箱：13195386551@163.com</span>
								<span class="txt2">一个工作日内回复，首选推荐</span>
							</div>
						</div>
						<div class="item">
							<img src="https://anhuiyaoying.com/webs/mobile.png" alt="">
							<div class="column_box">
								<span class="txt1">公共客服电话：0551-6560-3090</span>
								<span class="txt2">技术支持、咨询、投诉</span>
							</div>
						</div>
					</div>
					<div class="box" style="margin-top: 20px;">
						<div class="item">
							<img src="https://anhuiyaoying.com/webs/QQ.png" alt="">
							<div class="column_box">
								<span class="txt1">公共客服QQ：2516209840</span>
								<span class="txt2">周一到周五，9:00-18:00</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</el-dialog>

		<!-- 系统设置 -->
		<el-dialog width="40%" title="系统设置" center :visible.sync="showRememberPop" append-to-body>
			<div>
				<el-row>
					<el-col :span="12">
						<el-form :model="priceInfo" label-width="auto">
							<el-form-item label="最新报价" >
								<el-switch v-model="priceInfo.is_start_sale_latest_price" activeColor="#0099ff"></el-switch>
							</el-form-item>
						</el-form>
					</el-col>
					<el-col :span="12">
						<el-form :model="priceInfo" label-width="auto">
							<el-form-item label="历史最高价/最低价" >
								<el-switch v-model="priceInfo.is_start_sale_max_min_price" activeColor="#0099ff"></el-switch>
							</el-form-item>
						</el-form>
					</el-col>
					<el-col :span="12">
						<el-form :model="priceInfo" label-width="auto">
							<el-form-item label="销售单本次收款默认全部收款" >
								<el-switch v-model="priceInfo.is_sale_default_received_all" activeColor="#0099ff"></el-switch>
							</el-form-item>
						</el-form>
					</el-col>
					<el-col :span="12">
						<el-form :model="priceInfo" label-width="auto">
							<el-form-item label="采购单本次付款默认全部付款" >
								<el-switch v-model="priceInfo.is_purchase_default_received_all" activeColor="#0099ff"></el-switch>
							</el-form-item>
						</el-form>
					</el-col>
					<el-col :span="12">
						<el-form :model="priceInfo" label-width="auto">
							<el-form-item label="销售单显示发货状态" >
								<el-switch v-model="priceInfo.sale_order_show_delivery_status" activeColor="#0099ff"></el-switch>
							</el-form-item>
						</el-form>
					</el-col>
				</el-row>
			</div>
			<span slot="footer" class="dialog-footer">
                <el-button size="small" @click="showRememberPop = false">取 消</el-button>
                <el-button size="small" class="btn_primary_color" @click="setPriceRememberOK">确 定</el-button>
            </span>
		</el-dialog>
  	</div>
</template>

<script>
	import { getTodoCount, getCurRoles } from '@/api/login'
	import { mapState } from 'vuex';
	import { removeDownLoadTask, removeAllTask, setPriceRemember, getPriceRemember } from '@/api/common'
	import { baseUrl } from '@/config/env'
	
    export default {
		data() {
			return {
				showKefu: false,
				showPop: false,
				showRememberPop: false,
				corp_id: '',
				badgeCount: '',
				avatar: '',
				info: {
					name: '',
					phone: ''
				},
				editableTabsValue: '',
				editableTabs: [],
				isAdmin: false,
				showStatistic: false,
				menuList: [
					{ index: 'manage', name: '首页' },
					{ index: 'redirectPage', name: '首页' },
					{ index: 'roleList', name: '角色管理' },
					{ index: 'userList', name: '用户管理' },
					{ index: 'setPrint', name: '打印设置' },
					{ index: 'saleOrder', name: '销售开单' },
					{ index: 'saleReturn', name: '销售退货' },
					{ index: 'saleReserve', name: '销售预定' },
					{ index: 'purchaseOrder', name: '采购进货' },
					{ index: 'purchaseReturn', name: '采购退货' },
					{ index: 'purchaseReserve', name: '采购预定' },
					{ index: 'productList', name: '商品' },
					{ index: 'units', name: '单位管理' },
					{ index: 'priceLevel', name: '价格等级' },
					{ index: 'stockTaking', name: '盘点' },
					{ index: 'joinSplit', name: '组装拆分' },
					{ index: 'customerList', name: '客户' },
					{ index: 'supplierList', name: '供货商' },
					{ index: 'receiveOrder', name: '收款单' },
					{ index: 'payOrder', name: '付款单' },
					{ index: 'expensesList', name: '日常收支' },
					{ index: 'businessCount', name: '经营报表' },
					{ index: 'customerSales', name: '客户销售汇总' },
					{ index: 'supplierBuy', name: '供货商采购汇总' },
					{ index: 'productsAnalysis', name: '商品采销分析' },
					{ index: 'customerCheck', name: '客户对账单' },
					{ index: 'supplierCheck', name: '供货商对账单' },
					// { index: 'shouldReceive', name: '应收欠款' },
					// { index: 'shouldPay', name: '应付欠款' },
					{ index: 'expenditure', name: '日常收支统计' },
					{ index: 'commission', name: '员工提成统计' },
					{ index: 'stock', name: '库存查询' },
					{ index: 'stockwarning', name: '库存预警' },
					{ index: 'batchQuery', name: '批次查询' },
					{ index: 'qualityQuery', name: '保质期查询' },
					{ index: 'flowRecords', name: '资金账户流水' },
					{ index: 'personCenter', name: '个人中心' },
					{ index: 'todoList', name: '待办列表' },
				],
				cachedViews: [],  //动态缓存的路由
				priceInfo: {
					is_start_sale_latest_price: false,
					is_start_sale_max_min_price: false,
					is_sale_default_received_all: false,
					is_purchase_default_received_all: false,
					sale_order_show_delivery_status: false
				}
			}
		},
		watch: {
			'$route'(to, from) {
				let path = to.path.replace('/', '')
				this.menuSelect(path)
			}
		},
 		computed: {
			defaultActive: function(){
				return this.$route.path.replace('/', '');
			},
			...mapState(['taskList'])
		},
		mounted() {
			this.avatar = this.$store.state.avatar
			this.info.name = this.$store.state.userInfo.username
			this.info.phone = this.$store.state.userInfo.phone_no
			this.isAdmin = this.$store.state.isAdmin

			let corp_id = this.$store.state.corpId,
				user = this.$store.state.userInfo.id,
				status = '待审核';
			this.corp_id = corp_id

			let that = this
			getCurRoles({ corp_id }).then(res => {
				that.showStatistic = res.data.has_report

				let name = location.hash.substring(2)
				if (name.indexOf('?') > -1) {
					name = name.split('?')[0]
				}
				
				let result = res.data.role_list.find(item => item.has_approval)
				if (result || !res.data.role_list.length){
					getTodoCount({corp_id, user, status}).then(_res => {
						that.badgeCount = _res.data?_res.data.total:0
					})
				}
				this.$store.dispatch('GetTaskList', corp_id);
				if (!that.showStatistic && (name=='manage' || name=='redirectPage')){
					return
				}
				const selectedMenu = that.menuList.find(item => item.index == name);
				that.editableTabs.push({
					name: name,
					title: selectedMenu.name	
				})
				that.editableTabsValue = name
			})
		},
		methods: {
			menuSelect(index) {
				console.log(index)
				// 添加tabs
				// 先判断有没有添加过
				const result = this.editableTabs.find(item => item.name==index)
				if (!result) {
					const selectedMenu = this.menuList.find(item => item.index == index);
					this.editableTabs.push({
						name: index,
						title: selectedMenu.name	
					})
					 
					// 新增：将组件名加入缓存数组
					if (!this.cachedViews.includes(index)) {
						this.cachedViews.push(index);
					}
				}
				this.editableTabsValue = index;
			},
			handleTabsEdit(targetName) {
				let tabs = this.editableTabs;
				let activeName = this.editableTabsValue;
				if (activeName === targetName) {
					tabs.forEach((tab, index) => {
						if (tab.name === targetName) {
							let nextTab = tabs[index + 1] || tabs[index - 1];
							if (nextTab) {
								activeName = nextTab.name;
							}
						}
					});
				}
				// 移除标签
				this.editableTabs = tabs.filter(tab => tab.name !== targetName);
				// 从缓存数组中移除组件名
   		 		this.cachedViews = this.cachedViews.filter(name => name !== targetName);
				
				if (this.editableTabs.length) {
					this.editableTabsValue = activeName;
					this.$router.push(activeName)
				}
				// else{
				// 	activeName = 'manage'
				// 	this.editableTabs = [{name: 'manage', title: '首页'}]
				// 	this.editableTabsValue = activeName;
				// 	this.$router.push(activeName)
				// }
			},
			handleTabsClick(obj) {
				this.editableTabsValue = obj.name
				this.$router.push(obj.name)
			},
			handleCommand(val) {
				switch (val) {
					// 个人中心
					case 'personCenter':
						this.$router.push('personCenter')
						break;
					// 退出
					case 'logout':
						this.$store.dispatch('FedLogOut')
						this.$router.replace('login')
						break;
					default:
						break;
				}
			},
			// 任务列表下载文件
			downloadItem(item) {
				if (!item.success_time_unix){
					this.$message.error('文件正在下载中，请稍候再试~')
					return
				}
				let url = baseUrl+'/commons/download_task_view?pk_id='+item.id+'&token='+item.token+
					'&params_md5='+item.params_md5+'&success_time_unix='+item.success_time_unix
				this.downloadFile(url, item.file_name)
			},
			downloadFile(url, file_name) {
				let that = this
				fetch(url)
					.then(response => {
						if (!response.ok) {
							throw new Error('Network response was not ok');
						}
						return response.blob(); // 将响应转换为 Blob 对象
					})
					.then(blob => {
						const url = window.URL.createObjectURL(blob); // 创建一个指向 Blob 的 URL
						const a = document.createElement('a'); // 创建一个 <a> 元素
						a.style.display = 'none';
						a.href = url;
						a.download = file_name; // 设置下载的文件名
						document.body.appendChild(a);
						a.click(); // 模拟点击下载
						window.URL.revokeObjectURL(url); // 释放 Blob URL
						document.body.removeChild(a); // 移除 <a> 元素
						that.showPop = true
					})
					.catch(error => console.error('下载文件时出错:', error));
			},
			// 任务列表删除文件
			removeItem(item) {
				let that = this
				this.$confirm('确认删除该任务吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					removeDownLoadTask({
						corp_id: that.corp_id,
						pk_id: item.id
					}).then(res => {
						if (res.code == 200){
							that.$store.dispatch('GetTaskList', that.corp_id);
						}
						that.showPop = true
					})
				}).catch(() => {
					that.showPop = true
				});
			},
			// 删除所有任务
			removeAll() {
				let that = this
				this.$confirm('确认清除已下载无效的文件列表吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					removeAllTask({corp_id: that.corp_id}).then(res => {
						if (res.code == 200){
							that.$store.dispatch('GetTaskList', that.corp_id);
						}
						that.showPop = true
					})
				}).catch(() => {
					that.showPop = true
				});
			},
			buy() {
				this.$router.push('buyPackage')
			},
			toTodoList() {
				this.$router.push('todoList')
			},
			showPriceRememberDialog() {
				getPriceRemember({corp_id: this.corp_id}).then(res => {
					this.priceInfo.is_start_sale_latest_price = res.data.is_start_sale_latest_price || false
					this.priceInfo.is_start_sale_max_min_price = res.data.is_start_sale_max_min_price || false
					this.priceInfo.sale_order_show_delivery_status = res.data.sale_order_show_delivery_status || false
					this.priceInfo.is_purchase_default_received_all = res.data.is_purchase_default_received_all || false
					this.priceInfo.is_sale_default_received_all = res.data.is_sale_default_received_all || false
					this.showRememberPop = true
				})
			},
			setPriceRememberOK() {
				this.priceInfo.corp_id = this.corp_id
				setPriceRemember(this.priceInfo).then(res => {
					if (res.code == 200){
						this.$message.success('设置成功')
					}
					this.showRememberPop = false
				})
			}
		}
    }
</script>


<style lang="less" scoped>
	@import '../style/mixin';
	.manage_page{
		position: relative;
		.header_view {
			height: 70px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 50px 0 30px;
			background: @blue;
			color: #fff;
			.left {
				display: flex;
				align-items: center;
				img {
					width: 48px;
					height: 48px;
					margin-right: 10px;
				}
				p {
					font-size: 17px;
					font-weight: bold;
					letter-spacing: 1.5px;
				}
			}
			.right {
				display: flex;
				align-items: center;
				.item {
					margin-left: 30px;
					font-size: 14px;
					position: relative;
					cursor: pointer;
					.badge_item {
						margin-right: 20px;
					}
					.task {
						display: flex;
						align-items: center;
						color: #fff;
						img {
							width: 18px;
							height: 18px;
							margin: 3px 5px 0 0;
						}
					}
					.user_info {
						display: flex;
						align-items: center;
						.names {
							margin-left: 8px;
							display: inline-flex;
							flex-direction: column;
							font-size: 13px;
							color: #fff;
						}
					}
				}
			}
		}
		.slider_view {
			.tabs_view {
				position: fixed;
				height: 40px;
				top: 70px;
				left: 150px;
				right: 0;
				background: #fff;
				z-index: 99;
				box-shadow: 0px 1.5px 2px #bbb;
			}
			.page_view {
				padding-top: 40px;
				height: ~"calc(100% - 90px)";
			}
			height: ~"calc(100% - 70px)"; 
			background-color: #eee;
			overflow-y: auto;
			.item {
				display: flex;
				align-items: center;
				.my_icon {
					vertical-align: middle;
					margin-right: 5px;
					width: 24px;
					text-align: center;
					img {
						width: 21px;
						height: 21px;
					}
				}
			}
		}
	}
	.pop_content {
		position: relative;
		.clear_all {
			position: absolute;
			right: 10px;
			top: -38px;
			border-radius: 3px;
			padding: 2px 8px;
			font-size: 14px;
			border: 1px solid @blue;
			color: @blue;
			cursor: pointer;
		}
		.lists {
			padding: 0 10px;
			max-height: 220px;
			overflow-y: auto;
			.cell {
				display: flex;
				align-items: center;
				margin-bottom: 10px;
				justify-content: space-between;
				font-size: 14px;
				.btns {
					font-size: 16px;
					i {
						cursor: pointer;
						color: #bbb;
					}
					.blue {
						color: @blue;
						margin-right: 3px;
					}
				}
				&:last-child {
					// 只有最后一个子元素的样式
					margin-bottom: 0;
				}
			}
		}
		.bottom {
			height: 10px;
		}
	}
	.kefu {
		.kefu_header {
			display: flex;
			height: 134px;
			color: #fff;
			background-color: @blue;
			padding: 10px 25px;
			justify-content: space-between;
			.row_box {
				display: flex;
				img {
					width: 76px;
    				height: 76px;
					border-radius: 50%;
				}
				.row_center {
					display: flex;
    				flex-direction: column;
					margin-left: 22px;
					margin-top: 26px;
					font-size: 13px;
					color: #fff;
				}
			}
			.row_right {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 13px;
				color: #fff;
				img {
					width: 72px;
					height: 72px;
					margin-bottom: 10px;
				}
				span {
					margin-bottom: 5px;
					font-size: 13px;
				}
			}
		}
		.kefu_botom {
			background-color: #fff;
			box-sizing: border-box;
			padding: 36px 91px 76px 25px;
			.title {
				height: 22px;
				line-height: 22px;
				color: #303133;
				font-weight: 600;
				font-size: 16px;
			}
			.content_box {
				margin-top: 31px;
    			margin-left: 23px;
				.box {
					display: flex;
    				justify-content: space-between;
					.item {
						display: flex;
						align-items: center;
						img {
							width: 30px;
							height: 30px;
							margin-right: 15px;
						}
						.column_box {
							display: flex;
    						flex-direction: column;
							.txt1 {
								color: #303133;
								font-weight: 500;
								font-size: 13px;
							}
							.txt2 {
								margin-top: 3px;
								color: #909399;
								font-size: 12px;
							}
						}
					}
				}
			}
		}
	}
</style>
<style>
.el-badge__content {
	height: 16px;
    line-height: 16px;
    padding: 0 3px;
	border: none;
}
.el-popover__title {
	text-align: center;
	font-weight: bold;
	padding: 5px 0;
}
.kefu .el-dialog__header {
	background-color: #068CEE;
	padding: 20px 25px !important;
}
.kefu .el-dialog__title {
	font-size: 16px;
	color: #fff;
}
.kefu .el-dialog__headerbtn .el-dialog__close {
	font-size: 24px;
	color: #fff;
}
.kefu .el-dialog__body {
    margin-bottom: 0 !important;
    padding: 0 !important;
}
.el-submenu__title {
	font-size: 13px !important;
}
.el-menu-item {
	font-size: 13px !important;
}
.el-menu-item.is-active {
	background: #0099ff !important;
	border-top: 0.5px solid #c0c4cc;
}
</style>
